<template>
    <view class="content">
        <view class="mart-30">
            <view class="commit-title">旧绳信息</view>
            <view class="topContent readBox" v-if="oldData">
                <u-read-more ref="uReadMore" :showHeight="200" closeText="查看更多" :toggle="true" @open="readMoreChange" @close="readMoreChange">
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">旧绳编码</text>
                        </u-col>
                        <u-col span="8">
                            <DataSelect :disabled="thisID != null" class="w-100" table="UsingWirerope" action="GetSearchs" :filter="{ _Status: 1 }" label="code" value="autoID" :obj.sync="oldUsingWireropeObj" :id.sync="thisData.oldUsingWireropeID" :name.sync="thisData.oldCode"></DataSelect>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">旧绳名称</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ oldUsingWireropeObj.name }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">规格型号</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ oldUsingWireropeObj.guiGe }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">直径</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ oldUsingWireropeObj.diameter }} </text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">公称捻距</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ oldUsingWireropeObj.nianJu }} </text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">长度</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ oldUsingWireropeObj.lengthNum }} </text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">绳子条数</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ oldUsingWireropeObj.cnt }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">抗拉强度</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ oldUsingWireropeObj.mpaName }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">表面状态</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ oldUsingWireropeObj.surfaceStatusName }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">捻制类型</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ oldUsingWireropeObj.twistingTypeName }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">矿山</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ oldUsingWireropeObj.department_Name }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">安装日期</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ oldUsingWireropeObj.installDate | ymd }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">安装长度</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ oldUsingWireropeObj.installLengthNum }} </text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">安装地点</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ oldUsingWireropeObj.installAddressName }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">提升机类型</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ oldUsingWireropeObj.hoisterName }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">提升用途</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ oldUsingWireropeObj.hoisterUsageName }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">钢丝绳类型</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ oldUsingWireropeObj.wireropeTypeName }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">主要负责人</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ oldUsingWireropeObj.linkUser }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">负责人电话</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ oldUsingWireropeObj.linkPhone }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">备注</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ oldUsingWireropeObj.remark }}</text>
                        </u-col>
                    </u-row>
                </u-read-more>
            </view>
        </view>
        <view class="mart-30">
            <view class="commit-title">新绳信息</view>
            <view class="topContent">
                <u--form ref="uForm" :model="thisData" :rules="rules" label-width="120" labelAlign="center" :disabled="!isEdit">
                    <u-form-item label="新绳编码" :required="true" borderBottom prop="newUsingWireropeID">
                        <view class="w-100">
                            <DataSelect class="w-100" table="Stock" :disabled="!isEdit" action="GetSearchs" :filter="{ _IsOut: false }" label="code" value="autoID" @onChange="onNewUsingWireropeChange" :obj.sync="newUsingWireropeObj" :id.sync="thisData.newUsingWireropeID" :name.sync="thisData.newCode"></DataSelect>
                        </view>
                    </u-form-item>

                    <u-form-item label="新绳名称" :required="true" borderBottom prop="newName" class="relativeCol">
                        <view class="w-100">
                            <u-input v-model="thisData.newName" :disabled="!isEdit" placeholder="请输入钢丝绳名称" />
                        </view>
                    </u-form-item>

                    <u-form-item label="规格型号" borderBottom prop="guiGe" class="relativeCol">
                        <view class="w-100">
                            <u-input v-model="newUsingWireropeObj.guiGe" disabled placeholder="请输入规格型号" />
                        </view>
                    </u-form-item>

                    <u-form-item label="直径" borderBottom prop="diameter" class="relativeCol">
                        <view class="w-100">
                            <u-input v-model="newUsingWireropeObj.diameter" disabled placeholder="请输入直径">
                                <u--text text="mm" slot="suffix" type="tips"></u--text>
                            </u-input>
                        </view>
                    </u-form-item>

                    <u-form-item label="长度" borderBottom prop="lengthNum" class="relativeCol">
                        <view class="w-100">
                            <u-input v-model="newUsingWireropeObj.lengthNum" disabled placeholder="请输入长度">
                                <u--text text="m" slot="suffix" type="tips"></u--text>
                            </u-input>
                        </view>
                    </u-form-item>

                    <u-form-item label="绳子条数" borderBottom prop="cnt" class="relativeCol">
                        <view class="w-100">
                            <u-input v-model="newUsingWireropeObj.cnt" disabled placeholder="请输入绳子条数"> </u-input>
                        </view>
                    </u-form-item>

                    <u-form-item label="抗拉强度" borderBottom prop="diameter" class="relativeCol">
                        <view class="w-100">
                            <u-input v-model="newUsingWireropeObj.mpaName" disabled placeholder="请选择抗拉强度"> </u-input>
                        </view>
                    </u-form-item>

                    <u-form-item label="表面状态" borderBottom prop="diameter" class="relativeCol">
                        <view class="w-100">
                            <u-input v-model="newUsingWireropeObj.surfaceStatusName" disabled placeholder="请选择表面状态"> </u-input>
                        </view>
                    </u-form-item>

                    <u-form-item label="捻制类型" borderBottom prop="diameter" class="relativeCol">
                        <view class="w-100">
                            <u-input v-model="newUsingWireropeObj.twistingTypeName" disabled placeholder="请选择捻制类型"> </u-input>
                        </view>
                    </u-form-item>

                    <u-form-item label="安装日期" :required="true" prop="installDate" borderBottom>
                        <uni-datetime-picker :disabled="!isEdit" type="date" v-model="thisData.installDate" :end="$gx.FormatDate('YYYY-MM-DD')" @onShow="onPreviewShow" @onClose="onPreviewHide" />
                    </u-form-item>

                    <u-form-item label="出库日期" :required="true" prop="outStockDate" borderBottom>
                        <uni-datetime-picker :disabled="!isEdit" type="date" v-model="thisData.outStockDate" :end="$gx.FormatDate('YYYY-MM-DD')" @onShow="onPreviewShow" @onClose="onPreviewHide" />
                    </u-form-item>

                    <u-form-item label="下次检测日期" :required="true" prop="nextCheckDate" borderBottom>
                        <uni-datetime-picker :disabled="!isEdit" type="date" v-model="thisData.nextCheckDate" @onShow="onPreviewShow" @onClose="onPreviewHide" />
                    </u-form-item>

                    <u-form-item label="换绳原因" :required="true" borderBottom prop="reason" class="relativeCol">
                        <view class="w-100">
                            <u-input :disabled="!isEdit" v-model="thisData.reason" type="textarea" placeholder="请输入换绳原因"> </u-input>
                        </view>
                    </u-form-item>

                    <u-form-item label="备注" borderBottom prop="remark" class="relativeCol">
                        <view class="w-100">
                            <u-input :disabled="!isEdit" v-model="thisData.remark" type="textarea" placeholder="请输入备注"> </u-input>
                        </view>
                    </u-form-item>

                    <u-form-item label="挂绳前拉扭实验报告" borderBottom>
                        <view class="w-100">
                            <Upload ref="laNiuUploadRef" :disabled="!isEdit" v-model="thisData.laNiu_FilesList" :limit="30" @onPreviewShow="onPreviewShow" @onPreviewHide="onPreviewHide"> </Upload>
                        </view>
                    </u-form-item>

                    <u-form-item label="挂绳前无损检测报告" borderBottom>
                        <view class="w-100">
                            <Upload ref="qianWuSunUploadRef" :disabled="!isEdit" v-model="thisData.qianWuSun_FilesList" :limit="30" @onPreviewShow="onPreviewShow" @onPreviewHide="onPreviewHide"> </Upload>
                        </view>
                    </u-form-item>

                    <u-form-item label="挂绳后定期无损检测报告" borderBottom>
                        <view class="w-100">
                            <Upload ref="houWuSunUploadRef" :disabled="!isEdit" v-model="thisData.houWuSun_FilesList" :limit="30" @onPreviewShow="onPreviewShow" @onPreviewHide="onPreviewHide"> </Upload>
                        </view>
                    </u-form-item>
                </u--form>
                <view class="mart-30" v-show="isEdit">
                    <u-row justify="center">
                        <u-col span="6">
                            <u-button type="primary" @click="submit">保存</u-button>
                        </u-col>
                    </u-row>
                </view>
            </view>
        </view>

        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
export default {
    data() {
        return {
            thisID: null,
            oldData: {},
            thisData: {
                installDate: this.$gx.GetDateTime(),
                outStockDate: this.$gx.GetDateTime(),
            },
            rules: {
                newUsingWireropeID: [
                    {
                        validator: (rule, value, callback) => {
                            this.$nextTick(() => {
                                uni.$emit("refreshUpload");
                            });
                            if (this.$gx.IsEmpty(this.thisData.newUsingWireropeID)) {
                                return callback(new Error("请选择新绳"));
                            } else {
                                callback();
                            }
                        },
                        trigger: ["blur", "change"],
                    },
                ],
                newName: [
                    { required: true, message: "请输入新绳名称", trigger: ["blur", "change"] },
                    {
                        validator: () => {
                            this.$nextTick(() => {
                                uni.$emit("refreshUpload");
                            });
                        },
                        trigger: ["blur", "change"],
                    },
                ],
                installDate: [
                    { required: true, message: "请选择安装日期", trigger: ["blur", "change"] },
                    {
                        validator: () => {
                            this.$nextTick(() => {
                                uni.$emit("refreshUpload");
                            });
                        },
                        trigger: ["blur", "change"],
                    },
                ],
                outStockDate: [
                    { required: true, message: "请选择出库日期", trigger: ["blur", "change"] },
                    {
                        validator: () => {
                            this.$nextTick(() => {
                                uni.$emit("refreshUpload");
                            });
                        },
                        trigger: ["blur", "change"],
                    },
                ],
                nextCheckDate: [
                    { required: true, message: "请选择下次检测日期", trigger: ["blur", "change"] },
                    {
                        validator: () => {
                            this.$nextTick(() => {
                                uni.$emit("refreshUpload");
                            });
                        },
                        trigger: ["blur", "change"],
                    },
                ],
                reason: [
                    { required: true, message: "请输入换绳原因", trigger: ["blur", "change"] },
                    {
                        validator: () => {
                            this.$nextTick(() => {
                                uni.$emit("refreshUpload");
                            });
                        },
                        trigger: ["blur", "change"],
                    },
                ],
            },
            oldUsingWireropeObj: {},
            newUsingWireropeObj: {},
            isEdit: true,
        };
    },
    //生命周期-加载
    onLoad: function (option) {
        let that = this;
        // #ifdef APP-NVUE
        const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
        // #endif

        // #ifndef APP-NVUE
        const eventChannel = this.getOpenerEventChannel();
        // #endif
        eventChannel.on("editData", function (data) {
            let type = 0;
            that.isEdit = true;
            if (data.operateType == "编辑") type = 1;
            if (data.operateType == "详情") {
                uni.setNavigationBarTitle({
                    title: "换绳详情",
                });
                (type = 3), (that.isEdit = false);
            }
            that.init(data.data, type);
        });
    },
    onReady() {
        //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
        this.$nextTick(() => {
            this.$refs.uForm.setRules(this.rules);
        });
    },
    methods: {
        codeChange(type) {
            let codeObj = this.codeObj;
            if (Object.keys(codeObj).length < 1) {
                this.setRopeData("");
                return;
            }
            this.setRopeData(codeObj);
        },
        setRopeData(data) {
            let hasCol = ["code", "stockID", "name", "guiGe", "diameter", "nianJu", "lengthNum", "cnt", "mpaID", "mpaName", "surfaceStatusID", "surfaceStatusName", "twistingTypeID", "twistingTypeName", "remark"];
            hasCol.map((x) => {
                if (data == "") {
                    this.$set(this.thisData, x, "");
                } else {
                    this.$set(this.thisData, x, data[x]);
                }
            });
        },
        oldChange(data) {
            let hasCol = ["departmentID", "department_Name", "installAddressID", "installAddressName", "hoisterID", "hoisterName", "hoisterUsageID", "hoisterUsageName", "wireropeTypeID", "wireropeTypeName", "installLengthNum"];
            hasCol.map((x) => {
                if (data == "") {
                    this.$set(this.thisData, x, "");
                } else {
                    this.$set(this.thisData, x, data[x]);
                }
            });
        },
        init(data, type) {
            // type1编辑0添加
            if (data.autoID) {
                this.thisID = data.autoID;
                this.$app.CallApi(this.$app.api.ChangeWirerope.GetByID(this.thisID), {
                    success: (res) => {
                        this.oldUsingWireropeObj = res.oldUsingWireropeModel;
                        this.newUsingWireropeObj = res.newUsingWireropeModel;

                        res.outStockDate = res.newUsingWireropeModel.outStockDate;
                        res.nextCheckDate = res.newUsingWireropeModel.nextCheckDate;
                        res.laNiu_FilesList = res.newUsingWireropeModel.laNiu_FilesList;
                        res.qianWuSun_FilesList = res.newUsingWireropeModel.qianWuSun_FilesList;
                        res.houWuSun_FilesList = res.newUsingWireropeModel.houWuSun_FilesList;
                        res.remark = res.newUsingWireropeModel.remark;

                        this.thisData = res;
                    },
                });
            }
        },
        submit() {
            this.$refs.uForm
                .validate()
                .then((res) => {
                    if (this.$gx.IsEmpty(this.thisData.oldUsingWireropeID)) {
                        this.$refs.uToast.show({ type: "error", title: "", message: "请选择旧绳！" });
                        return;
                    }

                    console.log(this.$gx.DeepCopy(this.oldUsingWireropeObj));
                    console.log(this.$gx.DeepCopy(this.newUsingWireropeObj));

                    let apiFun = this.$app.api.ChangeWirerope.Insert;

                    this.thisData.oldName = this.oldUsingWireropeObj.name;

                    let newObj = {};
                    newObj.stockID = this.newUsingWireropeObj.stockID;
                    newObj.code = this.newUsingWireropeObj.code;
                    newObj.guiGe = this.newUsingWireropeObj.guiGe;
                    newObj.diameter = this.newUsingWireropeObj.diameter;
                    newObj.cnt = this.newUsingWireropeObj.cnt;
                    newObj.name = this.newUsingWireropeObj.name;
                    newObj.nianJu = this.newUsingWireropeObj.nianJu;
                    newObj.mpaID = this.newUsingWireropeObj.mpaID;
                    newObj.mpaName = this.newUsingWireropeObj.mpaName;
                    newObj.surfaceStatusID = this.newUsingWireropeObj.surfaceStatusID;
                    newObj.surfaceStatusName = this.newUsingWireropeObj.surfaceStatusName;
                    newObj.twistingTypeID = this.newUsingWireropeObj.twistingTypeID;
                    newObj.twistingTypeName = this.newUsingWireropeObj.twistingTypeName;
                    newObj.lengthNum = this.newUsingWireropeObj.lengthNum;
                    newObj.supplierID = this.newUsingWireropeObj.supplierID;
                    newObj.supplierName = this.newUsingWireropeObj.supplierName;
                    newObj.producerID = this.newUsingWireropeObj.producerID;
                    newObj.producerName = this.newUsingWireropeObj.producerName;
                    // newObj.remark = this.newUsingWireropeObj.remark;

                    newObj.installDate = this.thisData.installDate;
                    newObj.outStockDate = this.thisData.outStockDate;
                    newObj.nextCheckDate = this.thisData.nextCheckDate;
                    newObj.laNiu_FilesList = this.thisData.laNiu_FilesList;
                    newObj.qianWuSun_FilesList = this.thisData.qianWuSun_FilesList;
                    newObj.houWuSun_FilesList = this.thisData.houWuSun_FilesList;
                    newObj.remark = this.thisData.remark;

                    newObj.departmentID = this.oldUsingWireropeObj.departmentID;
                    newObj.installLengthNum = this.oldUsingWireropeObj.installLengthNum;
                    newObj.installAddressID = this.oldUsingWireropeObj.installAddressID;
                    newObj.installAddressName = this.oldUsingWireropeObj.installAddressName;
                    newObj.hoisterID = this.oldUsingWireropeObj.hoisterID;
                    newObj.hoisterName = this.oldUsingWireropeObj.hoisterName;
                    newObj.hoisterUsageID = this.oldUsingWireropeObj.hoisterUsageID;
                    newObj.hoisterUsageName = this.oldUsingWireropeObj.hoisterUsageName;
                    newObj.wireropeTypeID = this.oldUsingWireropeObj.wireropeTypeID;
                    newObj.wireropeTypeName = this.oldUsingWireropeObj.wireropeTypeName;
                    newObj.linkUser = this.oldUsingWireropeObj.linkUser;
                    newObj.linkPhone = this.oldUsingWireropeObj.linkPhone;

                    newObj.status = 0;

                    this.thisData.newUsingWireropeModel = newObj;

                    this.$app.CallApi(apiFun, {
                        data: this.thisData,
                        success: (res) => {
                            this.$refs.uToast.show({
                                type: "success",
                                title: "",
                                message: "保存成功！",
                                complete: () => {
                                    uni.navigateBack();
                                    uni.$emit("refreshData");
                                },
                            });
                        },
                    });
                })
                .catch((errors) => {});
        },

        onNewUsingWireropeChange() {
            console.log(this.$gx.DeepCopy(this.newUsingWireropeObj));
            this.thisData.newName = this.newUsingWireropeObj.name;
        },
        //文件预览开启
        onPreviewShow() {
            this.$refs.laNiuUploadRef.setReadOnly(true);
            this.$refs.qianWuSunUploadRef.setReadOnly(true);
            this.$refs.houWuSunUploadRef.setReadOnly(true);
        },
        //文件预览关闭
        onPreviewHide() {
            this.$refs.laNiuUploadRef.setReadOnly(false);
            this.$refs.qianWuSunUploadRef.setReadOnly(false);
            this.$refs.houWuSunUploadRef.setReadOnly(false);
        },
        readMoreChange() {
            uni.$emit("refreshUpload");
        },
    },
    // props: {
    //     isEdit: {
    //         type: Boolean,
    //         default: true,
    //     },
    // },
};
</script>

<style></style>
